<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("button#create").click(function () {
                $.post('/user', {
                    username: $("input#username1").val(),
                    password: $("input#password").val(),
                    roleName: $("select#role").val()
                }, function (resp) {
                    $("input#username1").val("");
                    $("input#password").val("");
                    $('table#users > tbody:last-child').append('<tr><td>' + resp.username + '</td><td>' + resp.roles + '</td></tr>');
                });
            });
            $("button#bind").click(function () {
                $.post('/owned', {
                    username: $("input#username").val(),
                    filterName: $("input#filterName").val()
                }, function (resp) {
                    $("input#username").val("");
                    $("input#filterName").val("");
                    $('table#ownedFilters > tbody:last-child').append('<tr><td>' + resp.username + '</td><td>' + resp.filterName + '</td></tr>');
                });
            });
            $("button#refresh").click(function () {
                $.getJSON('/user', function (result) {
                    $("table#users > tbody").empty();
                    $.each(result, function (i, record) {
                        $('table#users > tbody:last-child').append('<tr><td>' + record.username + '</td><td>' + record.roles + '</td></tr>');
                    });
                });
                $.getJSON('/filter', function (result) {
                    $("table#filters > tbody").empty();
                    $.each(result.content, function (i, record) {
                        $('table#filters > tbody:last-child').append('<tr><td>' + record.name + '</td><td>' + record.queries + '</td></tr>');
                    });
                });
                $.getJSON('/owned', function (result) {
                    $("table#ownedFilters > tbody").empty();
                    $.each(result.content, function (i, record) {
                        $('table#ownedFilters > tbody:last-child').append('<tr><td>' + record.username + '</td><td>' + record.filterName + '</td></tr>');
                    });
                });
            });
        });
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row justify-content-md-center">
        <div class="w-25">
            <div class="alert alert-primary text-center" role="alert">
                <div class="my-20">
                    <div class="col-md-20">
                        <div>
                            <table id="users" class="table table-striped table-responsive-md">
                                <thead>
                                <tr>
                                    <th>User Name</th>
                                    <th>Roles</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>2</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="alert alert-secondary text-center">
                <div class="my-20">
                    <div class="col-md-20">
                        <div>
                            <table id="filters" class="table table-striped table-responsive-md">
                                <thead>
                                <tr>
                                    <th>Filter Name</th>
                                    <th>Queries</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>2</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-75">
            <div class="alert alert-success text-center" role="alert">
                <label for="username1">User Name:</label>
                <input type="text" id="username1">
                <label for="password">Password:</label>
                <input type="text" id="password">
                <label for="role">Role:</label>
                <select id="role">
                    <option>user</option>
                    <option>admin</option>
                </select>
                <button id="create">Save</button>
            </div>
            <div class="alert alert-primary text-center" role="alert">
                <label for="username">User Name:</label>
                <input type="text" id="username">
                <label for="filterName">Filter Name:</label>
                <input type="text" id="filterName">
                <button id="bind">Bind</button>
                <button id="refresh">Refresh</button>
            </div>
            <div class="alert alert-success text-center">
                <div class="my-20">
                    <div class="col-md-20">
                        <div>
                            <table id="ownedFilters" class="table table-striped table-responsive-md">
                                <thead>
                                <tr>
                                    <th>User Name</th>
                                    <th>Filter Name</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>2</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>2</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>2</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>2</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>